<template>
  <div  class="app-wrapper">
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <transition
        @before-enter="beforeEnterReset"
        @before-leave="beforeLeaveReset"
        enter-active-class="animate__animated animate__fadeInDown"
        leave-active-class="animate__animated animate__fadeInUp"
      >
        <div
          enter-animate-name="animate__fadeInDown_reset"
          leave-animate-name="animate__fadeInUp_reset"
        >
          <navbar />
          <tags-view />
        </div>
      </transition>
      <app-main />
    </div>
  </div>
</template>

<script setup>

import { beforeEnter, beforeEnterReset, beforeLeaveReset } from '@/utils/transition';
import sidebar from './components/Sidebar/index'
import navbar from './components/Navbar'
import tagsView from './components/TagsView/index'
import AppMain from './components/AppMain'
// const store = useStore();
// const theme = computed(() => store.state.settings.theme);
// const sidebar = computed(() => store.state.app.sidebar);
// const topNav = computed(() => store.state.app.topNav);
// const needTagsView = computed(() => store.state.settings.tagsView);
// const fixedHeader = computed(() => store.state.settings.fixedHeader);

// const settingRef = ref(null);
// function setLayout() {
//   settingRef.value.openSetting();
// }
</script>

<style lang="scss" scoped>

</style>